<template>
    <el-aside :width="test.isCollse ? '64px' : '200px'">
        <h5 ref="isTitle" class="title">{{ test.isCollse ? '系统' : '通用管理系统' }}</h5>
        <el-menu 
            class="el-menu-vertical-demo" 
            :collapse="test.isCollse" 
            active-text-color="#ffd04b"
            :collapse-transition="false">
            <el-menu-item :index="item.path" v-for="item in noChild" :key="item.path" @click="push(item)">
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </el-menu-item>
            <el-sub-menu :index="item.path" v-for="item in child" :key="item.path">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>

                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group class="menu-item">
                    <el-menu-item :index="itemChild.path" v-for="itemChild in item.children" :key="itemChild.path"
                        @click="push(itemChild)">
                        <el-icon>
                            <component :is="itemChild.icon"></component>
                        </el-icon>
                        <span>{{ itemChild.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>

<script setup lang = 'ts'>
import { useStore } from '../store'
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const test = useStore()
// <el-icon><House /></el-icon>
const list = [
    {
        path: 'home',
        name: 'home',
        label: '首页',
        icon: 'House',
        url: 'Home/index'
    },
    {
        path: 'main',
        name: 'main',
        label: '商品管理',
        icon: 'video-play',
        url: 'Mail/index'
    },
    {
        path: 'user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
        url: 'User/index'
    },
    {
        label: '其他',
        icon: 'location',
        path: 'other',
        children: [
            {
                path: 'page1',
                name: 'page1',
                label: '页面1',
                icon: 'setting',
                url: 'Other/Page1/index'
            },
            {
                path: 'page2',
                name: 'page2',
                label: '页面2',
                icon: 'setting',
                url: 'Other/Page2/index'
            }
        ]
    }
]

const asyncList:Array<object> = test.loginRouters;
console.log('11111',asyncList);

// console.log(asyncList);

//没有children的list
const noChild = asyncList.filter((item:any) => !item.children)
//有children的list
const child = asyncList.filter((item:any) => item.children);
// console.log(noChild);
const isTitle = ref();
// 页面跳转
interface Item {
    path: string,
    name: string,
    label: string,
    icon: string,
    url: string,
    children:Array<object>
}
const push = (item:any) => {
    router.push({name:item.name})
    test.$patch((state)=>{
        if(item.name=='home'){
            state.current=null
        }else{
            state.current=item
            const bol = state.tableList.some((val)=>val.name===item.name)
            if(!bol){
                state.tableList.push(item)
            }
        }
    })

    
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo {
    background-color: gray;
}

.el-menu {
    border: none;
}

.menu-item {
    background-color: gray;
}

.title {
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}
</style>
